<template>
<div class="shop">
  <div class="header">
    <van-nav-bar :title="name" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
  </div>
  <div class="local_one">
    <div class="locone_top">
      <div class="lt_side fl">
        <div class="sd_side fl">
          <div class="pan_con_side_img">
            <img :src="shopData.avatar ? shopData.avatar:shopData.logo_url" class="sdf_img">
          </div>
         </div>
        <div class="sd_cont fl">
          <p class="sd_cont_p">{{shopData.nick_name}}</p>
          <p class="sd_col">
            <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/map_black.png" class="add_dw">&nbsp;{{shopData.province}}{{shopData.city}}</p>
        </div>
      </div>
      <!--<div class="lt_cont fl ">-->
        <!--<button>关注店铺</button>-->
      <!--</div>-->
    </div>
    <div class="locone_buttom">
      <div class="locd">
        <div class="lb_side fl">
          <a :href="'tel:' + shopData.phone">
         <img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/phon.png" class="add_dwph"> 联系客服
          </a>
        </div>
        <div class="lb_cont fl" @click="Store(shopData)"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/icon_two.png" class="add_dwph"/> 店铺动态</div>
      </div>
    </div>
  </div>
  <div class="commodity_top1">
    <ul class="" v-for="(item, index) in testData">
      <li @click="comprehensive(tab=1)" :class="{cur:tab===1}">全部</li>
      <li @click="test(index,tab=2)" :class="{cur:tab===2}">销量 <span class="sum_lis"><img :src="'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/' + ((flag==index)? 'pms.png':'pm.png')" class="ja_xl"></span></li>
      <li @click="testUp(index,tab=3)" :class="{cur:tab===3}">价格 <span class="sum_pric"> <img :src="'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/commodity/' + ((flags==index)? 'pms.png':'pm.png')" class="ja_xl"></span></li>
    </ul>
  </div>
  <div class="commodity_con1">
    <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
    <ul :data="list" v-if="shopDataList.length > 0">
      <li v-for="(item,index) in shopDataList" @click="link(item)" :key="index">
        <img :src="item.image_url">
        <div class="news_on">新品</div>
        <p class="title_type" style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
        height: 32px">{{item.name}}</p>
        <div class="pce_sum">
          <p class="price_type1">
            <span class="ty_one">￥</span>
            <span class="ty_two">{{item.price}}</span>
            &nbsp;&nbsp; 销售总数：{{item.sales_volume}} </p>
        </div>
      </li>
    </ul>
      <div class="loading loadmore-icon" v-show="showlaoding" v-if="shopDataList.length >= 10">
        <p v-if="shopDataList.length < shopDataList1.total">上拉加载更多</p>
        <p v-if="shopDataList.length == shopDataList1.total"> 没有更多了</p>
      </div>
    </v-loadmore>
  </div>
  <div class="eco_vill_container" v-if="shopDataList.length == 0">
    <div class="cont_null">
      <img src="https://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/null.png"><br>
      <p class="none_ship">没有商品</p>
    </div>
  </div>
</div>
</template>

<script>
  import { Loadmore } from 'mint-ui'
  import sha1 from 'js-sha1'
    export default {
        name: "Shop",
      data() {
        return {
          flag: -1,
          flags: -1,
          tab:1,
          name:this.$route.query.name,
          testData: [{content: 'item1'}],
          shopData:[],
          shopDataList:[],
          shopDataList1:[],
          page: 1,//页码
          showlaoding: false,//是否显示loading效果
          allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
          scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
          wrapperHeight: 0,
          courrentPage: 0,
        }
      },
      components: {
        'v-loadmore':Loadmore
      },
      created:function () {
        this.$emit('public_footer',false);
         setTitle(this.name);

      },
      mounted(){
          this.getCommodityShop();
          this.getCommodityShopList();


      },
      methods: {
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        //  获取店铺
        async getCommodityShop() {
          let Id= this.$route.query.shop_id;
          let params = {
            shop_id:Id
          };
          const res = await this.$axios.post(this.$api.ShopData, params);
          if (res.success) {
            this.shopData = res.data;
              this.wxRegCallback();
          } else {
            this.$toast(res.msg);
          }
        },

        loadBottom:function() {
          // 上拉加载
          this.getCommodityShopListmore();// 上拉触发的分页查询
        },
        async getCommodityShopList(){
          let Id= this.$route.query.shop_id;
          // 查询数据
          let params = {
            pageNum:this.page,
            pageSize:10,
            id:Id,
          };
          const data = await this.$axios.post(this.$api.ShopGoodsHomeData, params);
          if (data.success) {
            // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
            this.isHaveMore(data.data.nextPage);
            this.shopDataList = data.data.list
            this.shopDataList1 = data.data
            this.$nextTick(function () {
              this.scrollMode = "touch";

            });
            this.showlaoding=true
          } else {
            this.$toast(data.msg);
          }
        },
        async getCommodityShopListmore(){
          // 分页查询
          let Id= this.$route.query.shop_id;
          this.page = parseInt(this.page) + 1;
          let params = {
            pageNum:this.page,
            pageSize:10,
            id:Id,
          };
          const data = await this.$axios.post(this.$api.ShopGoodsHomeData, params);
          if (data.success) {
            this.shopDataList = this.shopDataList.concat(data.data.list);
            this.isHaveMore(data.data.nextPage);
            this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
            this.showlaoding=true
          };
        },
        isHaveMore:function(isHaveMore){
          // 是否还有下一页，如果没有就禁止上拉刷新
          this.allLoaded = true; //true是禁止上拉加载
          if(isHaveMore){
            this.allLoaded = false;
          }
        },

        //跳转商品详情页
        link(item){

          this.$router.push({name:'商品详情', query:{id:item.id,type:2}})
        },
        Store(shopData){
          this.$router.push({path:'/Store_dynamics',query:{name:shopData.company_name,shop_id:shopData.id}})
        },
        //点击销量排序
        test: function (index) {
          if (this.flag == index) { //  已经点击过
            this.flag = -1;
            return this.shopDataList.sort((a, b) => a.sales_volume - b.sales_volume);//降序
          } else { //  未点击过
            this.flag = index;
            return this.shopDataList.sort((a, b) => b.sales_volume - a.sales_volume);//升序
          }
        },
        //点击价格排序
      testUp: function (index) {
        if (this.flags == index) { //  已经点击过
          this.flags = -1;
          return this.shopDataList.sort((a, b) => a.price - b.price);//降序
        } else { //  未点击过
          this.flags = index;
          return this.shopDataList.sort((a, b) => b.price - a.price);//升序
        }
      },
        //综合
        comprehensive:function () {
          return this.shopDataList.sort((a, b) => (b.price * b.sales_volume) - (a.price * a.sales_volume));//升序
        },  wxRegCallback () {

              var that=this;
              var json_data=that.$axios.get(that.$api.weixinUrl);
              var fx_noncestr=that.$base.randomString(32);
              var fx_tampstr=that.$base.createTimestamp();
              var ran=["新店开张，欢迎来逛！","飙血甩卖，全场5折！","比某宝更便宜！","下单就送，买多少送多少","看看又不花钱！"];
              json_data.then(function(result){
                  var signStr = "jsapi_ticket=" + result.data + "&noncestr=" + fx_noncestr + "&timestamp=" + fx_tampstr + "&url=" + window.location.href;

                  signStr=sha1(signStr);
                  that.$wxjs.config({
                      debug: false,
                      appId: "wx994320d0aac3cee8",
                      timestamp: fx_tampstr,
                      nonceStr: fx_noncestr,
                      signature: signStr,
                      jsApiList: ['chooseImage', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
                  });

                  let Id= that.$route.query.shop_id;

                  // 用于微信JS-SDK回调
                  that.$wxjs.ready(function () {
                      that.$wxjs.onMenuShareTimeline({
                          title:that.shopData.nick_name,
                          desc: ran[Math.ceil(Math.random()*4)], // 分享描述
                          link:'http://www.mysoule.com/shop?shop_id='+Id+"&name="+encodeURIComponent(that.shopData.nick_name),
                          imgUrl: that.shopData.avatar,
                          success: function () {

                              that.$toast("分享成功");
                          },error: () => {
                              that.$toast("已取消分享");
                          }
                      });
                      that.$wxjs.onMenuShareAppMessage({
                          desc: ran[Math.ceil(Math.random()*4)], // 分享描述
                          title:that.shopData.nick_name,
                          link:'http://www.mysoule.com/shop?shop_id='+Id+"&name="+encodeURIComponent(that.shopData.nick_name),
                          imgUrl: that.shopData.avatar,
                          success: function () {

                              that.$toast("分享成功");
                          },error: () => {
                              that.$toast("已取消分享");
                          }
                      });
                  });
              })
          }
    },

    }
</script>

<style scoped>
  @import '../../assets/css/index.css';
</style>
